<template>
  <div class="combination">
    <el-form :model="updateCustomizeRule">
      <p>两车场组合时</p>
      <el-form-item label="月付租金 =">
        月租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场月租费用 <el-input size="mini" v-model="updateCustomizeRule.twoParkMonthDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="季付租金 =">
        季租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场季租费用 <el-input size="mini" v-model="updateCustomizeRule.twoParkQuarterDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="年付租金 =">
        年租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场年租费用 <el-input size="mini" v-model="updateCustomizeRule.twoParkYearDiscountRate"></el-input> %
      </el-form-item>

      <p>三车场组合时</p>
      <el-form-item label="月付租金 =">
        月租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场月租费用 <el-input size="mini" v-model="updateCustomizeRule.threeParkMonthDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="季付租金 =">
        季租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场季租费用 <el-input size="mini" v-model="updateCustomizeRule.threeParkQuarterDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="年付租金 =">
        年租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场年租费用 <el-input size="mini" v-model="updateCustomizeRule.threeParkYearDiscountRate"></el-input> %
      </el-form-item>

      <p>四车场组合时</p>
      <el-form-item label="月付租金 =">
        月租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场月租费用 <el-input size="mini" v-model="updateCustomizeRule.fourParkMonthDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="季付租金 =">
        季租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场季租费用 <el-input size="mini" v-model="updateCustomizeRule.fourParkQuarterDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="年付租金 =">
        年租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场年租费用 <el-input size="mini" v-model="updateCustomizeRule.fourParkYearDiscountRate"></el-input> %
      </el-form-item>

      <p>五车场组合时</p>
      <el-form-item label="月付租金 =">
        月租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场月租费用 <el-input size="mini" v-model="updateCustomizeRule.fiveParkMonthDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="季付租金 =">
        季租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场季租费用 <el-input size="mini" v-model="updateCustomizeRule.fiveParkQuarterDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item label="年付租金 =">
        年租费用最高值 <el-input size="mini" value="100"></el-input> %
         <span class="jia">+</span>
        剩余车场年租费用 <el-input size="mini" v-model="updateCustomizeRule.fiveParkYearDiscountRate"></el-input> %
      </el-form-item>

      <el-form-item>
      	<p style="text-align: center;margin-left: -20px;">
          <el-button @click="cancel">取消</el-button>
      		<el-button type="warning" @click="confirmUpdate">确认</el-button>
      	</p>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  export default {
    name: 'combination',
    data() {
      return {
        updateCustomizeRule: {}
      }
    },
    mounted() {
      this.getCustomizeRule();
    },
    methods: {
      getCustomizeRule() {
        this.$axios({
          method: 'get',
          url: '/promotion/customize-rule/getCustomizeRule'
        }).then((res) => {
          this.updateCustomizeRule = res.data;
          this.updateCustomizeRule.twoParkStatus = 'OPEN';
          this.updateCustomizeRule.threeParkStatus = 'OPEN';
          this.updateCustomizeRule.fourParkStatus = 'OPEN';
          this.updateCustomizeRule.fiveParkStatus = 'OPEN';
        })
      },
      confirmUpdate() {
        this.$axios({
          method: 'post',
          url: '/promotion/customize-rule/updateCustomizeRule',
          data: this.updateCustomizeRule
        }).then((res) => {
          if(res.code == 200) {
            this.$emit('closeDialog');
            this.$message.success('修改组合服务规则成功！')
          } else {
            this.$message.warning('修改组合服务规则失败！')
          }
        })
      },
      
      cancel() {
        this.$emit('closeDialog');
      }
    }
  }
</script>

<style scoped>
  .combination {
    padding: 0 30px;
  }
  .el-form-item {
    margin: 0;
  }
  .el-input {
    width: 54px;
    height: 20px;
  }
  .jia {
    font-size: 20px;
    margin: 0 10px;
  }
  p {
    font-size: 16px;
    font-weight: bold;
    margin-left: -20px;
  }


</style>
